* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			body {
				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
				background-color: #000;
				color: #fff;
				height: 100vh;
				overflow: hidden;
			}

			.video-container {
				position: relative;
				height: 100vh;
				width: 100%;
				display: none;
				/* 初始隐藏通话界面 */
			}

			.remote-video {
				position: absolute;
				width: 100%;
				height: 100%;
				object-fit: cover;
				background-color: #222;
			}

			.local-video {
				position: absolute;
				width: 120px;
				height: 160px;
				right: 15px;
				top: 15px;
				border-radius: 8px;
				object-fit: cover;
				border: 1px solid rgba(255, 255, 255, 0.2);
				box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
				background-color: #333;
			}

			.call-info {
				position: absolute;
				top: 20px;
				left: 0;
				right: 0;
				text-align: center;
				padding: 10px;
				background-color: rgba(0, 0, 0, 0.3);
			}

			.caller-name {
				font-size: 18px;
				font-weight: 500;
				margin-bottom: 5px;
			}

			.call-status {
				font-size: 14px;
				color: #eee;
			}

			.control-buttons {
				position: absolute;
				bottom: 40px;
				left: 0;
				right: 0;
				display: flex;
				justify-content: center;
				gap: 40px;
			}
			.control-buttons .fa{
				width: 40px;
				height: 40px;
				filter: brightness(0) invert(1);
			}
			.control-button {
				width: 70px;
				height: 70px;
				border-radius: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background-color: rgba(255, 255, 255, 0.1);
				border: none;
				color: white;
				cursor: pointer;
				transition: all 0.2s;
			}

			.control-button:active {
				transform: scale(0.95);
			}

			.control-button i {
				font-size: 30px;
				margin-bottom: 5px;
			}

			.control-button span {
				font-size: 12px;
			}

			.end-call {
				background-color: #ff3b30;
			}

			.switch-camera {
				background-color: rgba(255, 255, 255, 0.2);
			}

			.mute {
				background-color: rgba(255, 255, 255, 0.2);
			}

			/* 来电界面样式 */
			#incomingCall,#incomingGroupCall {
				background-color: #000;
				height: 100vh;
			}
			.incoming-call {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5);
				backdrop-filter: blur(5px);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				z-index: 10;
			}

			.caller-avatar {
				width: 120px;
				height: 120px;
				border-radius: 50%;
				margin-bottom: 20px;
				border: 3px solid rgba(255, 255, 255, 0.2);
				object-fit: cover;
			}

			.incoming-call .caller-name {
				font-size: 24px;
				margin-bottom: 10px;
			}

			.incoming-call .call-status {
				font-size: 16px;
				margin-bottom: 30px;
				color: #ccc;
			}

			.answer-buttons {
				display: flex;
				gap: 40px;
				justify-content: center;
			}
			.answer-buttons .fa{
				width: 40px;
				height: 40px;
				filter: brightness(0) invert(1);
			}
			.decline-call,
			.accept-call {
				width: 80px;
				height: 80px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: white;
				cursor: pointer;
				transition: transform 0.2s;
			}

			.decline-call {
				background-color: #ff3b30;
			}

			.accept-call {
				background-color: #34c759;
			}

			.decline-call:active,
			.accept-call:active {
				transform: scale(0.95);
			}

			.button-icon {
				font-size: 36px;
			}

			/* 来电振动动画 */
			@keyframes vibrate {
				0% {
					transform: rotate(0deg);
				}

				25% {
					transform: rotate(2deg);
				}

				50% {
					transform: rotate(0deg);
				}

				75% {
					transform: rotate(-2deg);
				}

				100% {
					transform: rotate(0deg);
				}
			}

			.incoming-call {
				animation: vibrate 0.3s infinite;
			}